<style>
    .layui-table td, .layui-table th {
        text-align: center;
    }
</style>
<title>考勤记录</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>考勤管理</cite></a>
        <a href="#/record/index/"><cite>考勤记录</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">考勤记录</div>
        <div class="layui-card-body">
            <div class="layui-form"  lay-filter="check-record-index-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="sdate" class="layui-input" id="checkdate" placeholder="选择时间" style="display: inline;width: 60%;">
                        <button class="layui-btn" lay-submit lay-filter="check-record-index-form-submit" style="margin-left: 10px;">立即搜索</button>
                    </div>
                </div>
            </div>
            <table id="check-record-index-table" lay-filter="check-record-index-table-tool"></table>
        </div>
        <script type="text/html" id="check-record-operate">
            <button class="layui-btn layui-btn-xs" lay-event="detail">查看详情</button>
        </script>
    </div>
</div>
<!-- 渲染 -->
<script type="text/html" id="check-record-btn-detail-tpl">
    <blockquote class="layui-elem-quote">考勤详情</blockquote>
    <table class="layui-table">
        <thead>
        <tr>
            <th>类型</th>
            <th>状态</th>
            <th>打卡时间</th>
            <th>设备</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.data.record, function(index, item){ }}
        <tr>
            <td>{{item.checkType}}</td>
            <td>{{item.locationResult}}</td>
            <td>{{item.userCheckDate}}</td>
            <td>{{item.sourceType}}</td>
        </tr>
        {{# });}}
        </tbody>
    </table>
    <blockquote class="layui-elem-quote">缺勤详情</blockquote>
    <table class="layui-table">
        <thead>
        <tr>
            <th>缺勤说明</th>
            <th>缺勤时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>{{d.data.remark.remark}}</td>
            <td>{{d.data.remark.date}}</td>
        </tr>
        </tbody>
    </table>
</script>
<script>
    layui.data.done = function(d){
        layui.use(['form'], function(){
            var form = layui.form;
            form.render(null, 'check-record-index-form');
        });
    };
    layui.use(['laydate', 'form', 'table', 'admin', 'laytpl', 'jquery'], function(){
        var laydate = layui.laydate
            ,table = layui.table
            ,form = layui.form
            ,laytpl=layui.laytpl
            ,$=layui.jquery
            ,admin = layui.admin;

        //执行一个laydate实例
        laydate.render({
            elem: '#checkdate' //指定元素
        });

        table.render({
            elem: '#check-record-index-table'
            ,url: layui.cache.baseapi + '/api/check.Record/index'
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'aid', title: 'ID', width: 80, sort: true, fixed: 'left', align: 'center'}
                ,{field: 'name', title: '姓名', width: 100, align: 'center'}
                ,{field: 'duty', title: '实际工作时长（小时）', align: 'center'}
                ,{field: 'absence', title: '缺勤时长（小时）', align: 'center'}
                ,{field: 'absence_section', title: '缺勤节数', align: 'center'}
                ,{field: 'date', title: '日期', width: 200, align: 'center'}
                ,{title: '操作', toolbar: '#check-record-operate', width:120, align:'center'},
            ]]
        });

        //监听工具条
        table.on('tool(check-record-index-table-tool)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(obj.event == 'detail'){
                admin.req({
                    url: layui.cache.baseapi + '/api/check.Record/details',
                    data: {aid: data.aid},
                    done: function(res){
                        layui.use(['laytpl', 'layer'], function(){
                            var laytpl = layui.laytpl;
                            var layer = layui.layer;
                            laytpl($('#check-record-btn-detail-tpl').html()).render(res, function(html){
                                layer.open({
                                    title: '考勤详情',
                                    area: '700px',
                                    content: html,
                                });
                            });
                        });
                    }
                });
            }
        });

        //监听搜索
        form.on('submit(check-record-index-form-submit)', function(data){
            var field = data.field;
            //执行重载
            table.reload('check-record-index-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: field
            });
        });
    });
</script>